/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Button, Badge, Select, DatePicker, Radio, Descriptions, Input, Upload, Icon, TreeSelect,Typography } from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
import PartPerson from './PartPerson'
const { Paragraph } = Typography;
import { download, leaveStatue,leaveStatueImg,printLeave } from '@/utils/utils';
const { TextArea } = Input;
const { Option } = Select;
const TreeNode = TreeSelect.TreeNode;

const ButtonGroup = Button.Group;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList:[],
      all_users_reviewer:[],
      all_users_rehearer:[],
      all_departments:[],
      format:'YYYY-MM-DD'
    };
  }
  componentDidMount() {
    const that=this;
    this.fetAllUser('all_users_reviewer')
    this.fetAllUser('all_users_rehearer')
    request(`/all_departments`, {
      method: 'GET',
    }).then((response)=> {
      console.log('all_structures', response)
      if(response.status===200){
        that.setState({
          all_departments:response.data.data
        })
      }
    })
    if(this.props.editRecord){
      if(this.props.editRecord.attachments.length>0){
        this.setState({
          fileList:[{
       uid:  this.props.editRecord.attachments[0].id,
       name: this.props.editRecord.attachments[0].name,
       status: 'done',
      }]
        })
      }
    }

  }
  fetAllUser=(type,value)=>{
    const that=this;
    request(`/all_staffs`, {
      method: 'GET',
      params:{
        department_id:type==='all_users_rehearer'?'253950250807472128':''
      }
    }).then((response)=> {
      console.log('all_structures', response)
      if(response.status===200){
        that.setState({
          [type]:response.data.data
        })
      }
    })
  }
  renderTreeNodes = data =>
    data.map((item,index) => {

      if (item.children.length>0) {
        return (
          <TreeNode value={item.id} title={item.name} key={item.id+index} >
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode  value={item.id}   key={item.id+index}  title={item.name}  />;
    });
  render() {
    const {getFieldDecorator} = this.props.form;
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
    };
    console.log('this.props.editRecord',this.props.editRecord)
    return (
      <div>
        <Form>
          <Descriptions className={'blue-descriptions'} column={4} title={<div style={{textAlign:'center'}}>文件审批详情</div>} bordered>
          <Descriptions.Item label="提交部门" span={4}>
            {this.props.editRecord.submitter.department_name}
          </Descriptions.Item>
<Descriptions.Item label="提交者"  span={2}>
{this.props.editRecord.submitter.name}
</Descriptions.Item>

<Descriptions.Item label="创建时间" span={2}>
{this.props.editRecord.created_at}
</Descriptions.Item>
<Descriptions.Item label="文件名称" span={2}>
{this.props.editRecord.file_name}
</Descriptions.Item>
<Descriptions.Item label="文件类型" span={2}>
{this.props.editRecord.file_type}
</Descriptions.Item>
<Descriptions.Item label="来文单位" span={2}>
{this.props.editRecord.issue_unit}
</Descriptions.Item>
<Descriptions.Item label="来文时间" span={2}>
{this.props.editRecord.issue_time}
</Descriptions.Item>
<Descriptions.Item label="文件说明" span={4} style={{ whiteSpace: 'wrap' }}>
<Paragraph style={{ fontWeight: 'bold', color: '#000' }} ellipsis={{ rows: 2, expandable: true }}>
  {this.props.editRecord.description}
</Paragraph>
</Descriptions.Item>
<Descriptions.Item label="文件附件" span={4}>
{
  this.props.editRecord.attachments.map((item, index) => {
    return <div>
      <Button type={'primary'} key={index} onClick={() => {
        download(`${config.prefix}/audited_documents/${this.props.editRecord.id}/attachments/${item.key}/download?token=Bearer ${sessionStorage.getItem('token')}`);
      }
      }>点击下载附件</Button> {item.name}

    </div>;
  })
}
</Descriptions.Item>

<Descriptions.Item label="状态" span={4}>
{leaveStatue(this.props.editRecord.status)}
</Descriptions.Item>
<Descriptions.Item label="当前审批层级" span={4}>
{
  <div style={{fontWeight:'bold',textAlign: 'center'}}>层级 {this.props.editRecord.review_sort}</div>
}
</Descriptions.Item>
            <Descriptions.Item label="审批人" span={4}>
              <PartPerson editRecord={this.props.editRecord}  columnWidth={'301px'} sort={1} form={ this.props.form}/>
            </Descriptions.Item>
            {/*<Descriptions.Item label="审批人" span={4}>
              {getFieldDecorator('reviewer_ids', {
                initialValue: this.props.editRecord?this.props.editRecord.reviewers.map((item,index)=>{
                  return {
                    key:`${item.user_id}#${item.name}`,
                    label:item.name
                  }
                }):[],
              })(
                <Select labelInValue={true} mode="multiple" showSearch>
                  {
                    this.state.all_users_reviewer.map((item,index)=>{
                      return <Option key={index} value={`${item.id}#${item.name}`}>
                        {item.name}
                      </Option>
                    })
                  }
                </Select>
              )}
            </Descriptions.Item>*/}
          </Descriptions>
        </Form>

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
